<template>
    <div id="media">
        <div class="item" v-for="(item,index) in data" v-bind:key="item">
            <i class="close cubeic-close" @click="$emit('remove',index)"></i>
            <img class="image" :src="tomedia(item)" />
        </div>
        <div v-if="data.length < number" class="item" @click="showMedia"><img class="image" src="./images/add.png" /></div>
    </div>
</template>

<script>
    import store from "../../../../../store/index";
    export default {
        name: "Media",
        data(){
            return {
                media:{
                    show:false
                }
            }
        },
        model:{
            prop:'data'
        },
        props:{
            number:{
                type:Number,
                default:1
            },
            type:{   //默认图片选项  video等于视频
              type:String,
              default:"image"
            },
            data:{
                type:Array,
                default(){
                    return []
                }
            }
        },
        methods:{
            tomedia(value){
                return this.$sysinfo.attach_url+value;
            },
            showMedia(){
                store.commit("setMedia",{
                    show:true,
                    type:this.type,
                    select:true,
                    value:this.data,
                    onSelect:(media)=>{
                        store.commit("setMedia",{
                            show:false
                        })
                        this.$emit('change',media);
                    },
                    onClose:()=>{
                        store.commit("setMedia",{
                            show:false
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less" src="./media.less"></style>
